<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>友链管理</title>
<link rel="stylesheet" th:href="@{/admin/css/links.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h2>友链管理</h2>

                    <!-- 添加框 -->
                    <el-card class="card-category">
                        <div slot="header">
                            <span>保存友链</span>
                        </div>
                        <div>
                            <el-form :inline="true" :model="editor" class="demo-form-inline">
                                <el-form-item required prop="name" :rules="[{ required: true, message: '请输入友链名称'}]" label="友链名称">
                                    <el-input style="width: 300px" v-model="editor.name" placeholder="请输入友链名称"></el-input>
                                </el-form-item>
                                <el-form-item required prop="url" :rules="[{ required: true, message: '请输入链接地址'}]" label="链接地址">
                                    <el-input style="width: 300px" v-model="editor.url" placeholder="请输入链接地址"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="success" @click="save">保存友链</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>

                    <!-- 列表 -->
                    <el-table ref="link" :data="links" border tooltip-effect="dark" style="width: 100%">
                        <el-table-column prop="id" align="center" sortable label="编号" show-overflow-tooltip width="80"></el-table-column>
                        <el-table-column align="center" prop="name" label="友链名称" width="300" show-overflow-tooltip></el-table-column>
                        <el-table-column align="center" prop="url" label="链接地址" width="300" show-overflow-tooltip></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                                <el-button style="margin-left:0;" size="mini" icon="el-icon-edit" type="warning" @click="handleEdit(scope.row.id)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br/>
                    <!-- 分页 -->
                    <div class="pagination">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageConf.pageCode"
                                :page-sizes="pageConf.pageOption"
                                :page-size="pageConf.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageConf.totalPage">
                        </el-pagination>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <!-- 编辑 -->
    <el-dialog
            title="编辑友链信息"
            :visible.sync="editDialog"
            width="30%"
            :append-to-body='true'
            :before-close="handleClose">
        <span>
            <el-form :inline="true" :model="editor">
                <el-form-item required prop="name" :rules="[{ required: true, message: '请输入友链名称'}]" label="友链名称">
                    <el-input style="width: 300px" v-model="editor.name" placeholder="请输入友链名称"></el-input>
                </el-form-item>
                <el-form-item required prop="url" :rules="[{ required: true, message: '请输入链接地址'}]" label="链接地址">
                    <el-input style="width: 300px" v-model="editor.url" placeholder="请输入链接地址"></el-input>
                </el-form-item>
            </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialog = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
        </span>
    </el-dialog>
</div>
</body>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/admin/js/links.js}"></script>
</html>
